<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 在遍历的过程中没有索引值 -->
        <span>遍历对象</span>
        <ul>
            <li v-for="(user,index) in users" style="list-style: none;" :key="index">{{user}}</li>
        </ul>

        <button @click='unbind'>不能触发动态绑定方法</button>
        <button @click='pushClick'>push()方法</button>
        <button @click='updateClick'>update()方法</button>
        <button @click='popClick'>pop()方法</button>
        <button @click='shiftClick'>shift()方法</button>
        <button @click='unshiftClick'>unshift()方法</button>
        <button @click='spliceClick'>splice()方法</button>
        <button @click='sortClick'>sort()方法</button>
        <button @click='reverseClick'>reverse()方法</button>
        <button @click='qiankaobei'>浅拷贝()</button>
        <button @click='shenkaobei'>深拷贝concat()</button>
        <hr>
        <span>{{userobj}}</span>
    </div>
</body>
<script src="../js/http_cdn.bootcdn.net_ajax_libs_vue_2.6.6_vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            users: ['a','m','b','d','e'],
            userobj:{

            }
        },
        methods: {
            // 不能触发动态响应
            unbind(){
                this.users[0] = 1;
                console.log(this.users)
            },

            pushClick(){
                //push()--数组追加元素--响应式的
                this.users.push("倒数第二","倒数第一")
            },
            updateClick(){
                //通过索引来修改值，不会响应式
                this.users[1]='aaa'
                console.log(this.users[1])
            },
            popClick(){
                //pop() -- 删除数组最后一个元素 -- 触发响应式
                this.users.pop()
            },
            shiftClick(){
                //shift() -- 删除数组第一个元素 -- 触发响应式
                this.users.shift()
            },
            unshiftClick(){
                //unshift() -- 在数组的首位添加元素
                this.users.unshift("第一个","第二个")
            },
            spliceClick(){
                //splice() -- 删除元素/插入元素/替换元素，如果起始值为负数，那么会从数组从后往前计算地址
                //删除元素
                //   （0,2）从第0个元素，删除2个元素
                //   （0）从第0个元素，删除后续所有元素
                //替换元素
                //   （0,2,'替换的元素a','替换的元素b'）从第0个元素，先删除2个元素,再插入对应元素的值
                //
                //插入元素
                //   （0,0,'替换的元素a','替换的元素b'）从第0个元素，先删除0个元素,再插入对应元素的值
                this.users.splice(0,0,'替换的元素a','替换的元素b')
            },
            sortClick(){
                //sort() -- 数组排序
                this.users.sort()
            },
            reverseClick(){
                //reverse() -- 输出反转
                this.users.reverse()
            },
            qiankaobei(){
                let bbx = ['a','b','c'];
                this.users = bbx;
                console.log(this.users,'赋值后')
                console.log(bbx,'赋值后')
                this.users[0] = 'jkl';
                console.log(this.users,'修改后')
                console.log(bbx,'修改后')
            },
            shenkaobei(){
                let bbx = ['a','b','c'];
                this.users = [].concat(bbx);
                console.log(this.users,'赋值后')
                console.log(bbx,'赋值后')
                this.users[0] = 'jkl';
                console.log(this.users,'修改后')
                console.log(bbx,'修改后')
            },
        },

        created(){
            let obj = {
                name:"zhangsan",
                birth:new Date()
            }
            this.userobj = Object.assign(obj);;
            console.log(this.userobj)
        }
    })
</script>

</html>
